<template>
  <view class="addcontshop">
    <view class="binner">
      <view class="addtitle">
        <input
          type="text"
          placeholder="轻触添加团购标题"
          v-model="baseFormData.title"
        />
        <textarea
          placeholder="轻触添加团购详细介绍, 如配送注意事项"
          placeholder-class="textarea-placeholder"
          v-model="baseFormData.description"
        />
      </view>
    </view>

    <view class="addshop">
      <uni-section title="团购商品" type="line" />
      <uni-forms
        class="forms"
        ref="valiForm"
        :rules="rules"
        :modelValue="valiFormData"
      >
        <uni-forms-item label="商品" required name="name">
          <uni-easyinput
            v-model="baseFormData.shop_name"
            placeholder="请输入商品名称"
          />
        </uni-forms-item>
        <uni-forms-item label="价格" required name="price">
          <uni-easyinput v-model="baseFormData.price" placeholder="0.00￥" />
        </uni-forms-item>
        <uni-forms-item label="团长电话" required name="phone">
          <uni-easyinput
            v-model="baseFormData.phone"
            placeholder="请输入电话号码"
          />
        </uni-forms-item>
        <uni-forms-item label="结束日期" name="date">
          <uni-datetime-picker
            type="datetime"
            return-type="timestamp"
            v-model="baseFormData.over_date"
          />
        </uni-forms-item>
        <button
          type="primary"
          button-hover="{background-color: #00a870; opacity: 0.7;}"
          @click="submit('valiForm')"
        >
          发起团购
        </button>
      </uni-forms>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const db = uniCloud.database();

const baseFormData = ref({
  shop_name: "",
  price: "",
  phone: "",
  over_date: "",
  title: "",
  description: "",
  start_date: new Date().getTime()
});
const valiForm = ref(null);
const submit = (type) => {
  valiForm.value
    .validate()
    .then((res) => {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      db.collection("cont-shop")
        .add(baseFormData.value)
        .then((res) => {
          console.log("成功");
          uni.showToast({
            title: "发布成功",
          });
          uni.navigateBack({
            delta: 1
          })
        }).catch(() => { 
          uni.showToast({
            title: '发布失败, 请检查网络',
            icon: 'none',
            mask: true
          })
        })
    })
    .catch((err) => {
      console.log("err", err);
    });
};

// 校验表单数据
const valiFormData = ref({
  name: "",
  price: "",
  phone: "",
  datetimesingle: "",
});

// 校验表单
// 校验规则
const rules = ref({
  name: {
    rules: [
      {
        required: true,
        errorMessage: "商品名不能为空",
      },
    ],
  },
  price: {
    rules: [
      {
        required: true,
        errorMessage: "价格不能为空",
      },
      {
        format: "number",
        errorMessage: "价格只能是数字",
      },
    ],
  },
  phone: {
    rules: [
      {
        required: true,
        errorMessage: "手机号不能为空",
      },
      {
        format: "number",
        errorMessage: "手机号只能是数字",
      },
    ],
  },
  date: {
    rules: [
      {
        required: true,
        errorMessage: "日期不能为空",
      },
    ],
  },
});
</script>

<style lang="scss" scoped>
.addcontshop {
  background-color: #f4f4f4;
}
.binner {
  background: url("../../static/img/contShop/addbinner.png");
  background-size: 100% 100%;
  width: 100%;
  height: 450rpx;
  position: relative;

  .addtitle {
    padding: 40rpx;
    background-color: #fff;
    position: absolute;
    width: 80%;
    height: 400rpx;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30rpx 30rpx 20rpx 20rpx;

    .uni-easyinput {
      border: none;
    }

    input {
      padding-bottom: 20rpx;
      border-bottom: 1px solid #ededed;
    }

    textarea {
      padding-top: 20rpx;
    }
  }
}
.addshop {
  padding-top: 170rpx;
  position: relative;

  .forms {
    position: absolute;
    background-color: #fff;
    transform: translateX(-50%);
    left: 50%;
    padding: 30rpx;
    width: 80%;
    border-radius: 20rpx;

    button {
      background-color: #00a870;
    }
  }
}
</style>